<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>最喜欢的季节</title>
    <script type="text/javascript">
        window.onload = function() {
            var imgArr = ['image/spring.jpg', 'image/summer.jpg', 'image/fall.jpg', 'image/winter.jpg'];
            var img1 = document.getElementById('img1');
            var index = 0;

            setInterval(function() {
                index++;
                if (index > imgArr.length - 1) {
                    index = 0;
                }
                img1.src = imgArr[index];

            }, 900)

            var box = document.getElementsByName('box');
            var submit = document.getElementById('submit');
            var all = document.getElementById('all');
            var all_allnot = document.getElementById('all_allnot');
            var none = document.getElementById('none');
            var opposite = document.getElementById('opposite');

            all.onclick = function() {
                for (var i = 0; i < box.length; i++) {
                    box[i].checked = true;
                }
                all_allnot.checked = true;
            }
            all_allnot.onclick = function() {


                for (var i = 0; i < box.length; i++) {
                    box[i].checked = all_allnot.checked;
                }
            }
            none.onclick = function() {
                for (var i = 0; i < box.length; i++) {
                    box[i].checked = false;
                }
                all_allnot.checked = false;
            }

            submit.onclick = function() {
                for (var i = 0; i < box.length; i++) {
                    box[i].checked = false;
                }
                alert('投票成功');
            }
            opposite.onclick = function() {
                for (var i = 0; i < box.length; i++) {
                    box[i].checked = !box[i].checked;
                }

            }






        }
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            position: relative;
        }
        
        div {
            border: 1px solid gray;
            border-radius: 4px;
        }
        
        #container {
            width: 100%;
            height: 1200px;
            background-color: blanchedalmond;
            position: absolute;
        }
        
        #main {
            margin: 0 auto;
            width: 70%;
            height: 100%;
            /* background-color: blueviolet; */
        }
        
        li {
            list-style: none;
            border-radius: 4px;
            float: left;
            text-align: center;
        }
        
        #top {
            text-align: center;
            width: 100%;
            height: 425px;
            border: 1px solid gray;
        }
        
        #vote {
            height: 250px;
            background-color: cornsilk;
        }
        /* #message{
            height: 125px;
            background-color:cornflowerblue;
        } */
        
        #introduce {
            height: 525px;
            background-color: rosybrown;
        }
        
        #vote ul {}
        
        #vote ul li {
            float: left;
            width: 15%;
            height: 180px;
            text-align: center;
            margin: 0 2%;
            /* border: 1px solid gray; */
        }
        
        #vote ul li img {
            width: 80%;
            height: 70%;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            width: 500px;
            height: 425px;
        }
        
        #top a:hover {
            color: red;
            transform: scale(1.1);
            display: block;
        }
        
        #vote ul li:hover {
            transform: scale(1.1);
        }
        
        .text {
            line-height: 30px;
            text-indent: 2em;
        }
        
        #h1 {
            width: 100%;
            height: 50px;
            ;
        }
        
        #text {
            width: 100%;
            height: 200px;
        }
        
        #introduce_image {
            position: relative;
            height: 250px;
            width: 100%;
            transform-style: preserve-3d;
            transition: 1.5s;
        }
        
        #introduce_image:hover {
            transform: rotateY(180deg);
        }
        
        #introduce_image img {
            height: 250px;
            width: 100%;
        }
        
        .face {
            height: 100%;
            width: 100%;
            position: absolute;
        }
        
        .back {
            background-color: aqua;
            z-index: -1;
            transform: rotateY(180deg);
        }
        
        .front {}
        
        #nav {
            position: fixed;
            width: 100%;
            height: 80px;
            background-color: #fff;
            opacity: 0.8;
        }
        
        #nav_1 {
            margin: 0 15%;
            background-color: #fff;
            height: 100%;
        }
        
        #nav_1 ul li {
            width: 24%;
            height: 100%;
            display: block;
            /* border: px solid red; */
            line-height: 80px;
        }
        
        #nav a {
            display: block;
        }
        
        #nav_1 ul li:hover {
            background-color: blueviolet;
            display: block;
        }
        
        .ad {
            position: fixed;
            top: 50%;
        }
        
        .ad img {
            width: 5%;
            height: 100px;
        }
        
        .right {
            right: 0;
        }
        
        .left {
            left: 0;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="main">
            <div id="top">
                <a><img id="img1" src="image/summer.jpg" alt="三三"></a>
                <hr>
            </div>
            <div id="vote">
                <div id="vote_nav">
                    投票
                    <input type="checkbox" id="all_allnot">全选/全不选
                    <button id="all">全选</button>
                    <button id="none">全不选</button>
                    <button id="opposite">反选</button>
                    <button id="submit">提交</button>
                    <hr>

                </div>
                <ul>
                    <li>
                        <a href="#" class="acss">
                            <img src="image/spring.jpg" alt="1"><br> 春天
                            <br></a>
                        <input type="checkbox" name="box"><br>

                    </li>
                    <li>
                        <a href="#" class="acss">
                            <img src="image/summer.jpg" alt="1"><br> 夏天
                            <br></a>
                        <input type="checkbox" name="box"><br>

                    </li>
                    <li>
                        <a href="#" class="acss">
                            <img src="image/fall.jpg" alt="1"><br> 秋天
                            <br></a>
                        <input type="checkbox" name="box"><br>

                    </li>
                    <li>
                        <a href="#" class="acss">
                            <img src="image/winter.jpg" alt="1"><br> 冬天1
                            <br></a>
                        <input type="checkbox" name="box"><br>

                    </li>
                    <li>
                        <a href="#" class="acss">
                            <img src="image/winter1.jpg" alt="1"><br> 冬天2
                            <br></a>
                        <input type="checkbox" name="box"><br>

                    </li>
                </ul>

            </div>
            <div id="introduce">
                <div id="h1">
                    <h1>济南的冬天
                        <span style="font-size: 14px;">作者：老舍</span>
                    </h1>
                </div>
                <div class="text" id="text">
                    对于一个在北平住惯的人，像我，冬天要是不刮大风，便是奇迹；济南的冬天是没有风声的。对于一个刚由伦敦回来的，像我，冬天要能看得见日光，便是怪事；济南的冬天是响晴的。自然，在热带的地方，日光是永远那么毒，响亮的天气，反有点叫人害怕。可是，在北中国的冬天，而能有温晴的天气，济南真得算个宝地。 [1] 设若单单是有阳光，那也算不了出奇。请闭上眼睛想：一个老城，有山有水，全在天底下晒着阳光，暖和安适地睡着，只等春风来把它们唤醒，这是不是个理想的境界？ 小山整把济南围了个圈儿，只有北边缺着点口儿。这一圈小山在冬天特别可爱，好像是把济南放在一个小摇篮里，它们全安静不动地低声地说：“你们放心吧，这儿准保暖和。”真的，济南的人们在冬天是面上含笑的。他们一看那些小山，心中便觉得有了着落，有了依靠。他们由天上看到山上，便不知不觉地想起：“明天也许就是春天了吧？这样的温暖，今天夜里山草也许就绿起来了吧？”就是这点幻想不能一时实现，他们也并不着急，因为有这样慈善的冬天，干啥还希望别的呢！
                    最妙的是下点小雪呀。看吧，山上的矮松越发的青黑，树尖上顶着一髻儿白花，好像日本看护妇。山尖全白了，给蓝天镶上一道银边。山坡上，有的地方雪厚点，有的地方草色还露着，这样，一道儿白，一道儿暗黄，给山们穿上一件带水纹的花衣；看着看着，这件花衣好像被风儿吹动，叫你希望看见一点更美的山的肌肤。等到快日落的时候，微黄的阳光斜射在山腰上，那点薄雪好像忽然害了羞，微微露出点粉色。就是下小雪吧，济南是受不住大雪的，那些小山太秀气！ 古老的济南，城里那么狭窄，城外又那么宽敞，山坡上卧着些小村庄，小村庄的房顶上卧着点雪，对，这是张小水墨画，也许是唐代的名手画的吧。
                    那水呢，不但不结冰，倒反在绿萍上冒着点热气，水藻真绿，把终年贮蓄的绿色全拿出来了。天儿越晴，水藻越绿，就凭这些绿的精神，水也不忍得冻上，况且那些长枝的垂柳还要在水里照个影儿呢！看吧，由澄清的河水慢慢往上看吧，空中，半空中，天上，自上而下全是那么清亮，那么蓝汪汪的，整个的是块空灵的蓝水晶。这块水晶里，包着红屋顶，黄草山，像地毯上的小团花的灰色树影。这就是冬天的济南。


                </div>
                <!-- <div id="introduce_image">
                    <div class="face front">
                        <img src="image/spring.jpg" alt="1">
                    </div>
                    <div class="face back">
                        <div class="text">
                            创作背景 播报 编辑 老舍1930年前后来到山东，先后在济南齐鲁大学和青岛山东大学任教7年之久，对山东产生了深厚的感情，山东被称为他的“第二故乡”。据老舍夫人胡絜青回忆，老舍生前“常常怀念的是从婚后到抗战爆发，在山东度过的那几年”。该文是老舍1931年春天在济南齐鲁大学任教时写成的。原为一系列直接描写济南风景名胜的长篇散文《一些印象》中的第五节，发表在《齐大月刊》欧一卷第六期（1931年4月出版）。 </div>
                    </div>


                </div> -->
            </div>





        </div>
    </div>
    <div id="nav">
        <div id="nav_1">
            <ul>
                <a href="#">
                    <li>首页</li>
                </a>
                <a href="1.html">
                    <li>介绍</li>
                </a>
                <a href="#">
                    <li>投票</li>
                </a>
                <a href="#">
                    <li>更多</li>
                </a>

            </ul>
        </div>
    </div>
    <div class="ad right">
        右侧边栏
    </div>
    <div class="ad left">
        左侧边栏
    </div>
</body>

</html>